<div class="metrics" ng-if="pod || deployment || node">
  <div class="metrics-options">
    <!-- Let the user select the container if we're showing pod metrics. -->
    <div ng-if="pod.spec.containers.length" class="form-group">
      <label for="selectContainer">Container:</label>
      <div class="select-container">
        <span ng-show="pod.spec.containers.length === 1">
          {{pod.spec.containers[0].name}}
        </span>
        <select id="selectContainer"
                ng-show="pod.spec.containers.length > 1"
                ng-init="options.selectedContainer = pod.spec.containers[0]"
                ng-model="options.selectedContainer"
                ng-options="container.name for container in pod.spec.containers track by container.name">
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="timeRange">Time Range:</label>
      <select id="timeRange"
              ng-model="options.timeRange"
              ng-options="range.label for range in options.rangeOptions"
              ng-disabled="metricsError">
      </select>
    </div>
  </div>

  <div ng-if="!loaded" class="mar-top-md">Loading...</div>
  <div ng-if="loaded && noData && !metricsError" class="mar-top-md">No metrics to display.</div>

  <div ng-if="metricsError" class="empty-state-message text-center">
    <h2>
      <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
      Metrics are not available.
    </h2>

    <p>
      An error occurred getting metrics<span ng-if="options.selectedContainer.name">
        for container {{options.selectedContainer.name}}</span><span ng-if="metricsURL">
        from <a ng-href="{{metricsURL}}">{{metricsURL}}</a></span>.
    </p>

    <p class="text-muted">
      {{metricsError.details}}
    </p>
  </div>

  <div ng-repeat="metric in metrics" ng-if="!noData && !metricsError" class="metrics-full">
    <h3 class="metric-label">
      {{metric.label}}
      <small ng-if="pod.spec.containers.length > 1">
        <span ng-if="metric.containerMetric">Container Metrics</span>
        <span ng-if="!metric.containerMetric">Pod Metrics</span>
      </small>
      <small ng-if="deployment">
        Total for All Pods
      </small>
     </h3>

    <!-- Show a summary of usage above the charts like the patternfly utilization card. -->
    <!-- Reuse the utilization card styles, but only here. -->
    <div ng-if="metric.datasets[0].total" class="utilization-trend-chart-pf">
      <div class="current-values">
        <h1 class="available-count pull-left">
          {{metric.datasets[0].available}}
        </h1>
        <div class="available-text pull-left">
          <div>Available of</div>
          <div>{{metric.datasets[0].total}} {{metric.units}}</div>
        </div>
      </div>
    </div>

    <!-- Clear floats so top margin works on the charts below. -->
    <div style="clear: both;"></div>

    <!-- Donut -->
    <div ng-if="metric.datasets[0].total" ng-attr-id="{{metric.chartPrefix + uniqueID}}-donut" class="metrics-donut"></div>

    <!-- Sparkline -->
    <div ng-attr-id="{{metric.chartPrefix + uniqueID}}-sparkline" class="metrics-sparkline"></div>
  </div>
</div>
